<template>
	<view class="content">
		<view  class="news-container">
			<image src="../../static/images/noshuju.png" class="no-data" v-show="noshuju"></image>
			<view class="news-item"  @tap="gonewsinfo" v-for="(item,index) in newslist" :key="index" :data-id="item.id" > 
				<view class="news-img">
					<!-- <image src="../../static/images/shipin-icon.png" class="shipin-icon"></image> -->
					<image :src="item.filepath" class="news-images" ></image>
				</view>
				<view class="news-title">{{item.title}}</view>
				<view class="news-resourse clear">
					<text class="left">{{item.source}}</text>
					<text class="right">{{item.read_nums}}阅读</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
	var page=1;
	import MescrollUni from "@/components/uni-load-more.vue";
	export default {
			data() {
				return {
                    choose_address:{},
					loadingType: 0,
					contentText: {
						contentdown: "上拉显示更多",
						contentrefresh: "正在加载...",
						contentnomore: "没有更多数据了"
					},
					newslist:{},
					noshuju:false,//是否出现没有数据的图片
					keywords:""
				}
			},
			components: {
				MescrollUni
			},
			onPullDownRefresh() {
				page=1
				this.loadingType=0;
			    this.getdata();   
			    setTimeout(function () {
			            uni.stopPullDownRefresh();
			    }, 1000);
			},
			onReachBottom: function() {

				if (this.loadingType != 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				page++;//每触底一次 page +1
				let data={province_id:this.choose_address.provinceid,city_id:this.choose_address.cityid,page:page};
				if(this.keywords){
					data.keywords=this.keywords
				}
				
				uni.request({
					url: httpPath.filePath+"/index/article/index",
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: data,
					success: (res) => {
						if (res.data.data.length==0) {//没有数据
							this.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return false;
						}
						for (let i = 0;i < res.data.data.length;i++) {
							
							this.newslist.push(res.data.data[i]);
							
						}
						this.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
						
					}
				});
			
			},
			onLoad(option) {
				let $this=this;
				uni.getStorage({
				 	key: 'choose_address',
				 	success: function (res) {
						if(option.keywords){
							$this.keywords=option.keywords;
						}
				 	    $this.choose_address=res.data;
						$this.getdata();
				 	}
				 });
				 page=1;
				 
				 this.loadingType=0;
				
			},
			methods: {
				/**
				 *去往详情页面
				 */
				gonewsinfo(e){
					uni.navigateTo({
						url:"newsinfo?id="+e.currentTarget.dataset.id
					})
				},
				/**
				 * 获取数据
				 */
	           getdata(){
				   let data={province_id:this.choose_address.provinceid,city_id:this.choose_address.cityid,page:page};
				   if(this.keywords){
					   data.keywords=this.keywords
				   }
				  if(this.choose_address){
						uni.request({
							url: httpPath.filePath+'/index/article/index',
							method:'POST',
							header:{'content-type':'application/x-www-form-urlencoded'},
							data: data,
							success: (res) => {
								if(res.data.code==200){
									if(res.data.data.length!=0){
										this.noshuju=false;
										this.newslist=res.data.data;
									}else{
										this.noshuju=true;
									}
									
								}
								   
							}
					   });
				  }else{
					  uni.showModal({
						showCancel:false,
					  	content:"页面加载有误"
					  })
					  uni.navigateBack()
				  }
			   }
			},
			
		}
</script>

<style>
	
	.clear::after{content: "";
	display: block;clear: both;}
	.left{float: left;}
	.right{float: right;}
	.news-resourse{color:#999999;font-size: 22rpx;margin-top: 10rpx;padding-bottom: 20rpx;border-bottom: 1px solid #F2F2F2;}
	.news-container{width:100%;box-sizing: border-box;padding: 32rpx;}
	.news-img{width: 686rpx;border-radius: 10rpx;overflow: hidden;
	position: relative;
	}
	.news-img .shipin-icon{width:107rpx ;height: 107rpx;position:absolute;top:calc( 50% - 53rpx);left:calc( 50% - 53rpx);z-index: 10;}
	.news-img .news-images{width:100%;height:330rpx;border-radius: 10rpx;}
	/* .news-img video{width:100%;height:330rpx;border-radius: 10rpx;} */
	.news-item{margin-bottom: 20rpx;}
	.news-title{width: 100%;overflow: hidden;text-overflow: ellipsis;
	white-space: nowrap;
	font-size:32rpx;
	font-family:PingFang SC;
	font-weight:bold;
	color:rgba(51,51,51,1);
	line-height:43rpx;}
	.toutiao-contanier .toutiao-title{
		width:100%;
		height:30rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(41,41,41,1);
		line-height:30rpx;
		margin-bottom: 15rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.toutiao-contanier .toutiao-info{
		width:100%;
		height:30rpx;
		font-size:24rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:24rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.tuijian-info{
		position: absolute;
		bottom: 0px;
		left: 0px;
		box-sizing: border-box;
		padding: 20rpx 10rpx;
		width: 100%;
		background: -moz-linear-gradient(top, transparent 0%, #000 100%);
	   background: -webkit-linear-gradient(top,transparent 0%,#000 100%);
	   background: -o-linear-gradient(top, transparent 0%,#000 100%);
	   background: -ms-linear-gradient(top, transparent 0%,#000 100%);
	   background: linear-gradient(to bottom, transparent 0%,#000 100%)
	} 
	.tuijian-info view{
		color: #fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 100%;
	}
	 .tuijian-info view:nth-of-type(1){
		font-size:20rpx;
		font-weight:400;
		height: 30rpx;
		color:rgba(255,255,255,1);
		line-height:30rpx;
		margin-bottom: 10rpx;
	}
	.tuijian-info view:nth-of-type(2){
		height:30rpx; 		
		font-size:28rpx;
		font-weight:bold;
		color:rgba(255,255,255,1);
		line-height:30rpx;
	} 
	
</style>
